<template>
	<view class="city-content">
		<change-header></change-header>
		<change-list :letter="letter"   :city="city"></change-list>
		<change-alphabet @change="change" :city="city"></change-alphabet>
	</view>
</template>

<script>
	import changeHeader from'../../components/changeHeader.vue'
	import changeList from'../../components/changeList.vue'
	import changeAlphabet from'../../components/changeAlphabet.vue'
	import { city } from '../../util/city.js'
	export default {
		components:{
			changeHeader,changeList,changeAlphabet
		},
		data() {
			return {
				city,
				letter:null
			}
		},
		methods: {
			change(i){
				this.letter = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.city-content{
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
</style>
